<template>
	<view class="open_vip">
		<image src="@/static/xinjiang/open_vip_bg.png" mode="aspectFit" class="open_vip__bg"></image>
		<view class="open_vip__back">
			<image src="@/static/xinjiang/left_arrow_white.png" mode="aspectFill" class="open_vip__back-icon" @click="onBack()"></image>
		</view>
		<view class="open_vip__content">
			<view class="open_vip__head">
				<view class="open_vip__head-title">开通VIP</view>
				<view class="open_vip__head-subtitle">开通VIP，即刻解锁全部特权</view>
			</view>
			<view class="open_vip__container">
				<view class="open_vip__card">
					<view class="open_vip__card-item" :class="{'open_vip__card-a': priceIndex === index, 'mr_40': index % 2 == 0}" @click="tapPriceCard(index)" v-for="(item, index) in list" :key="item.id">
						<view class="open_vip__card-title">{{ item.name }}</view>
						<view class="open_vip__card-price"><text class="open_vip__card-char">￥</text>{{ item.price }}</view>
						<!-- <view class="open_vip__card-price--original">原价：¥18</view> -->
						<image src="@/static/xinjiang/hot.png" mode="aspectFit" class="open_vip__hot" v-if="index === 0"></image>
					</view>
					<!-- <view class="open_vip__card-item" :class="{'open_vip__card-a': priceIndex === 1}" @click="tapPriceCard(1)">
						<view class="open_vip__card-title">月卡</view>
						<view class="open_vip__card-price"><text class="open_vip__card-char">￥</text>30</view>
						<view class="open_vip__card-price--original">原价：¥18</view>
					</view>
					<view class="open_vip__card-item mr_40" :class="{'open_vip__card-a': priceIndex === 2}" @click="tapPriceCard(2)">
						<view class="open_vip__card-title">半年卡</view>
						<view class="open_vip__card-price"><text class="open_vip__card-char">￥</text>140</view>
						<view class="open_vip__card-price--original">原价：¥18</view>
					</view>
					<view class="open_vip__card-item" :class="{'open_vip__card-a': priceIndex === 3}" @click="tapPriceCard(3)">
						<view class="open_vip__card-title">年卡</view>
						<view class="open_vip__card-price"><text class="open_vip__card-char">￥</text>998</view>
						<view class="open_vip__card-price--original">原价：¥18</view>
					</view> -->
				</view>
				
				<view class="open_vip__type mb_30" @click="payType = 'AMOUNT'">
					<view class="open_vip__type-left">
						<!-- <image class="open_vip__type-icon" src="@/static/xinjiang/wechat.png" mode="aspectFit"></image> -->
						<text class="open_vip__type-name">余额</text>
						<text class="open_vip__amount">可用余额：{{ userinfo.amount }}</text>
					</view>
					<u-icon name="checkmark-circle-fill" size="32" color="#0862EC" v-if="payType === 'AMOUNT'"></u-icon>
					<u-icon name="checkmark-circle" size="32" color="#D9D9D9" v-else></u-icon>
				</view>
				
				<view class="open_vip__type mb_70" @click="payType = 'GOLD'">
					<view class="open_vip__type-left">
						<!-- <image class="open_vip__type-icon" src="@/static/xinjiang/alipay.png" mode="aspectFit"></image> -->
						<text class="open_vip__type-name">钻石</text>
						<text class="open_vip__amount">可用钻石：{{ userinfo.gold }}</text>
					</view>
					<u-icon name="checkmark-circle-fill" size="32" color="#0862EC" v-if="payType === 'GOLD'"></u-icon>
					<u-icon name="checkmark-circle" size="32" color="#D9D9D9" v-else></u-icon>
				</view>
				
				<view class="open_vip__btn" @click="_payVip()">立即开通</view>
				<view class="open_vip__agreement">
					<image class="open_vip__agreement-icon" src="@/static/xinjiang/check_a.png" mode="aspectFit" v-if="check" @click="check = false"></image>
					<image class="open_vip__agreement-icon" src="@/static/xinjiang/check.png" mode="aspectFit" v-else @click="check = true"></image>
					<text>开通会员前请阅读《会员服务协议》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {vipShop, payVip} from '@/common/api.js'
	import {mapState, mapActions} from 'vuex'
	
	export default {
		data() {
			return {
				check: false,
				payType: 'AMOUNT',
				priceIndex: 0,
				list: []
			}
		},
		onShow() {
			this.updateUserinfo()
			this._vipShop()
		},
		computed: {
			...mapState(['userinfo']),
			price() {
				return this.list.length ? this.list[this.priceIndex].price : 0
			}
		},
		methods: {
			...mapActions(['updateUserinfo']),
			onBack() {
				uni.navigateBack()
			},
			tapPriceCard(index) {
				this.priceIndex = index
			},
			_vipShop() {
				vipShop().then(({data}) => {
					this.list = data
				})
			},
			_payVip() {
				uni.showLoading({
					title: '正在支付...'
				})
				payVip({shop_id: this.list[this.priceIndex].id, pay_type: this.payType}).then(({msg}) => {
					uni.showToast({
						title: msg,
						icon: 'none'
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
@import url("openVip.scss");
</style>
